<template>
    <el-container>
        <el-aside width="auto" style="background: #191a23">
            <Aside :isCollapse="isCollapse" :defaultActiveMenuItem="defaultActiveMenuItem"
                   @isIndexTagFun="isIndexTagFun"/>
        </el-aside>
        <el-container>
            <el-header>
                <Header @collapseFromHeader="asideToggle" :user-obj="this.currLoginUser"
                        @isIndexTagFun="isIndexTagFun"/>
            </el-header>
            <Tag @setMenuItemActive="setMenuItemActive" :isIndexTag="isIndexTag"></Tag>
            <el-main>
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    /* eslint-disable */
    import Header from '../header/Header';
    import Tag from '../header/Tag';
    import Aside from '../aside/Aside';
    import Main from '../../views/menu/MenuManager';
    import Footer from '../footer/Footer';

    export default {
        name: "Index",
        computed: {
            currLoginUser: {
                get: function () {
                    return this.currLoginUserStr ? JSON.parse(this.currLoginUserStr) : null;
                },
                set: function (val) {
                }
            }
        },
        watch: {
            '$route': function (to, from) {
                // console.log(to, from)
            }
        },
        data() {
            return {
                isCollapse: false,//控制菜单收缩展开
                isIndexTag: true,//用于判断当前tag是否是首页
                defaultActiveMenuItem: '/',//控制菜单默认激活项
                currLoginUserStr: sessionStorage.getItem("currLoginUser"),
                transitionName: 'fade'
            }
        },
        methods: {
            //侧边导航栏收缩
            asideToggle(param) {
                this.isCollapse = param;
            },
            //设置菜单激活项
            setMenuItemActive(param) {
                this.isIndexTag = !param;
                this.defaultActiveMenuItem = param != null ? param.path : '';
                //如果是首页标签被激活则路由到首页
                if (this.isIndexTag) {
                    this.$router.push({path: "/index/main"});
                }
            },
            //判断点击的是否首页
            isIndexTagFun(param) {
                if (param === true) {
                    //首页
                    this.isIndexTag = true;
                    this.$store.commit('pushTag', null);
                } else {
                    //非首页
                    this.isIndexTag = false;
                    this.defaultActiveMenuItem = param;
                }
                //跳转到路由页面
                this.$router.push({path: param === true ? "/index/main" : param});
            }
        },
        components: {
            Header,
            Tag,
            Aside,
            Main,
            Footer
        },
        mounted() {
            if (this.currLoginUser) {
                //建立websocket连接
                this.$wsConnection(this.$wssUrl+ this.currLoginUser.id);
            } else {
                // //验证是否记住密码
                // this.$httpGet(this.$axiosBaseHttp, "api/rest/sys/", {}).then(res => {
                //     if (res.code === 200) {
                //         sessionStorage.setItem("currLoginUser", JSON.stringify({
                //             id: res.data.id,
                //             loginName: res.data.loginName,
                //             name: res.data.name,
                //             roleName: res.data.roleName,
                //             header: this.$commonUrlHttp + "api/rest/file/download/" + res.data.header,
                //             sex: res.data.sex,
                //             signName: res.data.signName,
                //             email: res.data.email,
                //             token: ""
                //         }));
                //         this.$router.push({path: "/index/main"});
                //     } else {
                //         //未记住密码跳转到登录页面
                //         this.$router.push({path: "/"});
                //     }
                // });
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-header {
        /*background-image: linear-gradient(190deg, rgba(16, 74, 255, 0.42) 25%, rgba(0, 179, 255, 0.67) 75%);*/
        background: linear-gradient(90deg, #1d42ab, #2173dc, #1e93ff);
        color: #ffffff;
        line-height: 60px;
    }

    .el-main {
        background-color: #f2f4f9;
        color: #333;
        padding: 10px;
    }

    #app > .el-container {
        width: 100%;
        height: calc(100vh);
    }

    /*修改滚动条样式--start*/
    .el-main::-webkit-scrollbar {
        width: 5px;
        height: 10px;
    }

    .el-main::-webkit-scrollbar-track {
        background: rgb(239, 239, 239);
        border-radius: 2px;
    }

    .el-main::-webkit-scrollbar-thumb {
        background: #bfbfbf;
        border-radius: 10px;
    }

    .el-main::-webkit-scrollbar-thumb:hover {
        background: rgba(39, 161, 255, 0.92);
    }

    .el-main::-webkit-scrollbar-corner {
        background: rgba(39, 161, 255, 0.92);
    }

    /*修改滚动条样式--end*/
    /*路由切换动效--begin*/
    .fade-enter-active {
        transition: all .2s ease;
    }

    .fade-leave-active {
        /*transition: opacity 0.5s*/
        transition: all .1s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .fade-enter, .fade-leave-to {
        transform: translateX(5px);
        opacity: 0
    }

    /*路由切换动效--end*/
</style>
